<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册 - 校园论坛 - 相思湖学院</title>
<link rel="shortcut icon" href="static/image/logo_little.png">
<link rel="stylesheet" type="text/css" href="static/css/top.css" >
<link rel="stylesheet" type="text/css" href="static/css/login.css" >
</head>
<body>
	<div class="top">
		<img class="logo" alt="相思湖学院论坛" src="static/image/logo.png">
		<form action="#">
			<input type="text" name="search" placeholder="请输入搜索内容">
			<input type="submit" class="submit" value="搜索">
		</form>
		<div class="visitor">
			<a href="ps.login">登陆</a>
			<a href="${path }/register.jsp">注册</a>
		</div>
	</div>
	<div class="contral">
		<div class="middle">
			<div class="title"><h2>注册</h2><a href="ps.login">已有账号？现在登录</a></div>
			<form action="register" method="post" onsubmit="return checksubmit()">
				<div>
					<span>用户名：</span>
					<input type="text" id="username" name="username" value="${user.username }" onfocus="userOnfocus(this.name)" onblur="userOnblur(this.name)">
					<i id="tip_username" style="display: none;">用户名由6~12个字符组成</i>
					<kbd id="chk_username"></kbd>
				</div>
				<div>
					<span>密&nbsp;&nbsp;&nbsp;码：</span>
					<input type="password" id="password" name="password"
					 value="${user.password }" onfocus="userOnfocus(this.name)" onblur="userOnblur(this.name)"
					 onpaste="return false" ondragenter="return false" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
					<i id="tip_password" style="display: none;">密码长度为9-16个字符，只能包含字母、数字和下划线</i>
					<kbd id="chk_password"></kbd>
				</div>
				<div>
					<span style="margin-left: 40px;">确认密码：</span>
					<input type="password" id="againpsd" name="againpsd"
					 value="${againpsd }" onfocus="userOnfocus(this.name)" onblur="userOnblur(this.name)"
					 onpaste="return false" ondragenter="return false" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
					<i id="tip_againpsd" style="display: none;">请再次输入密码</i>
					<kbd id="chk_againpsd"></kbd>
				</div>
				<div style="border-bottom: 0">
					<input class="submit" type="submit" value="提交">
					<span style="color: red; position: absolute;">${admitRegister }</span>
				</div>
			</form>
		</div>
	</div>
	<div class="bottom"></div>
</body>
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	var admitRegister = '${admitRegister}';
	if(admitRegister != "") {
		checksubmit();
	}
	function userOnfocus(id) {
		document.getElementById("tip_"+id).style.display = "inline-block";
		document.getElementById("chk_"+id).innerHTML = "";
	}
	function userOnblur(id) {
		document.getElementById("tip_"+id).style.display = "none";
		var value = document.getElementById(id).value;
		if(id == "username") {
			/* 把字符串中的汉字替换成两个字符在计算长度 */
			if(value.replace(/[^\x00-\xff]/g,"01").length < 6 || value.replace(/[^\x00-\xff]/g,"01").length > 12) {
				document.getElementById("chk_"+id).innerHTML = "用户名长度不符";
				return false;
			}
			return true;
		} else if(id == "password") {
			if(value.length < 9 || value.length > 18){
				document.getElementById("chk_"+id).innerHTML = "密码长度为9-16个字符，只能包含字母、数字和下划线";
				return false;
			}
			return true;
		} else if(id == "againpsd") {
			if(value == "") {
				document.getElementById("chk_"+id).innerHTML = "请再次输入密码";
				return false;
			} else {
				if(value != document.getElementById('password').value) {
					document.getElementById("chk_"+id).innerHTML = "两次输入的密码不一致";
					return false;
				}
			}
			return true;
		}
	}
	function checksubmit() {
		if(userOnblur("username") & userOnblur("password") & userOnblur("againpsd")) {
			return true;
		} else {
			return false;
		}
	}
</script>
</html>